<%@ page language="java" pageEncoding="UTF-8" %>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <!DOCTYPE html>
        <html>

        <head>
            <base href="${context}/" />
            <title>后台管理</title>
            <meta charset="utf-8" />
            <base href="${pageContext.request.contextPath}/">
            <link rel="stylesheet" href="css/admin.css" />
            <script src="../js/jquery-3.6.0.js"></script>
            <script src="../js/jquery-form.js" type="text/javascript"></script>
            <script src="../js/template.js"></script>
            <script src="/layer/layer.js"></script>
            <style>
                .addbtn {
                    border: 1px #e1e1e1 solid;
                    color: #707070;
                    cursor: pointer;
                    vertical-align: bottom\9;
                    overflow: hidden;
                    background: url(../images/admin/admin_bg.gif) 0 -228px repeat-x;
                    float: right;
                    margin-top: -23px;
                    margin-right: 290px;
                    z-index: 666;
                }
            </style>
        </head>

        <body>
            <div class="container">
                <div id="header">
                    <jsp:include page="header.jsp"></jsp:include>
                </div>
                <div id="admin_left">
                    <ul class="submenu">
                        <jsp:include page="left.jsp"></jsp:include>
                    </ul>
                    <div id="copyright"></div>
                </div>

                <div id="admin_right">
                    <div style="height: 640px;">
                        <div class="headbar">
                            <div class="searchbar">
                                <form action="admin/manager" method="get" id="searchFrom">
                                    <input type="hidden" name="opr" value="initManager" />
                                    <input type="hidden" name="p" id="p" value="1" />
                                    <input type="hidden" name="pSize" id="pSize" value="5" />
                                    <select class="auto" name="state" id="state">
                                        <option value="0">请选择状态</option>
                                        <option value="1">正常</option>
                                        <option value="-1">已禁用</option>
                                        <option value="2">已删除</option>
                                    </select>
                                    <select class="auto" name="power" id="power">
                                        <option value="0">请选择权限</option>
                                        <option value="2">超级管理员</option>
                                        <option value="1">普通管理员</option>
                                    </select>
                                    用户名： <input class="small" name="name" id="name" type="text"
                                        value="${seachUser.username}">
                                    最后上线IP： <input class="small" name="lastIp" id="name" type="text"
                                        value="${seachUser.lastIP}">
                                    上线时间：<input class="small" name="startTime" id="name" type="date"
                                        value="${seachUser.startTime}">
                                    至：<input class="small" name="endTime" id="name" type="date"
                                        value="${seachUser.endTime}">

                                    <button class="btn" type="submit">
                                        <span class="sel">筛 选</span>
                                    </button> &nbsp;

                                </form>
                                <button class="addbtn" id="addmanager" onclick="showAdd()">
                                    <span>添加管理员</span>
                                </button> &nbsp;
                            </div>


                            <div class="field">
                                <table class="list_table" align="center">
                                    <col width="40px" />
                                    <col width="50px" />
                                    <col width="50px" />

                                    <col width="50px" />
                                    <col width="50px" />
                                    <col width="50px" />


                                    <col width="70px" />
                                    <thead>
                                        <tr>
                                            <th>选择</th>
                                            <th>用户名</th>
                                            <th>权限</th>
                                            <th>最后上线时间</th>

                                            <th>最后上线IP</th>

                                            <th>状态</th>


                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                        <form action="" method="post" name="orderForm" align="center">
                            <div class="content">
                                <table class="list_table">
                                    <col width="40px" />
                                    <col width="50px" />
                                    <col width="50px" />
                                    <col width="50px" />
                                    <col width="50px" />
                                    <col width="50px" />
                                    <col width="70px" />
                                    <tbody>
                                        <c:forEach items="${pageBean.data}" var="users">
                                            <c:if test="${users.state==1}">
                                                <tr onMouseOver="this.style.backgroundColor='#E0FFFF'"
                                                    onMouseOut="this.style.backgroundColor='#FFFFFF'">
                                            </c:if>
                                            <c:if test="${users.state==-1}">
                                                <tr onMouseOver="this.style.backgroundColor='#FAFAD2'"
                                                    onMouseOut="this.style.backgroundColor='#FFFFFF'">
                                            </c:if>
                                            <c:if test="${users.state==2}">
                                                <tr style="opacity: 0.5;"
                                                    onMouseOver="this.style.backgroundColor='#FFDAB9'"
                                                    onMouseOut="this.style.backgroundColor='#FFFFFF'">
                                            </c:if>

                                            <td><input name="" type="checkbox" value="1" /></td>
                                            <td>

                                                <a href="javascript:void(0)" id="updateUserName" data-uid="${users.id}">
                                                    <c:if test="${users.state==2}">
                                                        <del>
                                                    </c:if>
                                                    ${users.username}</del>
                                                </a>
                                            </td>
                                            <td>
                                                <c:if test="${users.power==2}"> <b class="red3">超级管理员</b></c:if>
                                                <c:if test="${users.power==1}">普通管理员</c:if>
                                            </td>
                                            <td>
                                                ${users.lastTime}
                                            </td>

                                            <td>${users.lastIP}</td>

                                            <td>
                                                <c:if test="${users.state==1 ||users.state==3}">正常</c:if>
                                                <c:if test="${users.state==-1}">已禁用</c:if>
                                                <c:if test="${users.state==2}">已删除</c:if>
                                            </td>


                                            <td><a href="javascript:void(0)"><img class="operator"
                                                        data-uid="${users.id}" src="images/admin/bj.png" alt="编辑"
                                                        title="编辑" id="updateUser"
                                                        onmouseover="this.style.width='18px',this.style.height='18px'"
                                                        onMouseOut="this.style.width='13px',this.style.height='13px'" /></a>

                                                <c:if test="${users.state==1}">
                                                    <a href="javascript:void(0)"><img class="operator"
                                                            src="images/admin/sc.png" alt="删除" id="delID" title="删除"
                                                            data-uid="${users.id}"
                                                            onmouseover="this.style.width='18px',this.style.height='18px'"
                                                            onMouseOut="this.style.width='13px',this.style.height='13px'" /></a>
                                                </c:if>

                                                <c:if test="${users.state==2}">
                                                    <a href="javascript:void(0)"><img class="operator"
                                                            src="images/admin/hf.png" alt="删除" id="hfID" title="恢复"
                                                            data-uid="${users.id}"
                                                            onmouseover="this.style.width='18px',this.style.height='18px'"
                                                            onMouseOut="this.style.width='13px',this.style.height='13px'" /></a>
                                                </c:if>

                                                <c:if test="${users.state==1}">
                                                    <a href="javascript:void(0)"><img class="operator"
                                                            src="images/admin/jy1.png" alt="禁用" id="shieldID" title="禁用"
                                                            data-uid="${users.id}"
                                                            onmouseover="this.style.width='18px',this.style.height='18px'"
                                                            onMouseOut="this.style.width='13px',this.style.height='13px'" /></a>
                                                </c:if>

                                                <c:if test="${users.state==-1}">
                                                    <a href="javascript:void(0)"><img class="operator"
                                                            src="images/admin/hy.png" alt="还原" id="repShieldID"
                                                            title="还原" data-uid="${users.id}"
                                                            onmouseover="this.style.width='18px',this.style.height='18px'"
                                                            onMouseOut="this.style.width='13px',this.style.height='13px'" /></a>
                                                </c:if>
                                            </td>
                                            </tr>

                                        </c:forEach>
                                    </tbody>
                                </table>
                            </div>
                        </form>
                        <form>
                            <select class="auto" name="pageSize" id="usersize"
                                style="float: right;margin-right: 50px; margin-top: 10px"
                                onchange="goPageSize(this.value)">
                                <c:forEach begin="5" end="30" var="pSize" step="5">
                                    <option value="${pSize}">${pSize}</option>
                                </c:forEach>

                            </select>
                            <span
                                style="float: right;margin-right: 10px;padding-top: 5px;margin-top: 10px;color: rgb(148, 152, 152);">
                                页面数据:${pageBean.currPageSize} 条</span>
                        </form>
                        <div class='pages_bar'>
                            <a href='javascript:goPage(1)' id="first">首页</a>
                            <a href="javascript:if(${pageBean.currPage==1}){goPage(1)}else{goPage(${pageBean.currPage-1})}"
                                id="prev">上一页</a>
                            <c:forEach begin="1" end="${pageBean.totalPages}" var="p">
                                <a href="javascript:goPage(${p})">${p}</a>
                            </c:forEach>
                            <a href="javascript:if (${ pageBean.currPage == pageBean.totalPages }) {goPage(${ pageBean.totalPages}) }else { goPage(${ pageBean.currPage + 1 })}"
                                id="next">下一页</a>
                            <a href='javascript:goPage(${pageBean.totalPages})' id="last">尾页</a>
                            <select onchange="goPage(this.value)" id="pselect">
                                <c:forEach begin="1" end="${pageBean.totalPages}" var="p">
                                    <option value="${p}">${p}</option>
                                </c:forEach>
                            </select>
                            <span>当前第${pageBean.currPage}页/共${pageBean.totalPages}页</span>
                        </div>
                        <!-- 弹窗代码开始  -->
                        <div class="web_notice" id="msgdiv"
                            style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);z-index: 99999;text-align: left;">
                            <div id="msg"
                                style="position: fixed;top: 50%;left: 50%;width: 550px;background: #FFF;transform: translate(-50%, -50%);border-radius: 40px;padding: 50px 40px;">
                                <form action="admin/manager?opr=update" method="post" id="updateSubmit">
                                    <h3 style="font-weight: bold;text-align: center;font-size: 30px;margin-top: -20px;">

                                        <span id="msgs">修改用户信息</span>
                                        <span id="msgH"></span>

                                    </h3>
                                    <div style="font-size: 16px;">
                                        <input type="hidden" id="uid" name="uid" value="1">
                                        <span>用户 &nbsp;&nbsp;名：</span> <input type="text" value="用户名"
                                            style="margin-top: 20px;padding: 5px;" id="upusername" name="account"
                                            disabled><br>
                                        <span>最后上线&nbsp;I&nbsp;P：</span><input type="text" name="lastIp" value=""
                                            style="margin-top: 20px;padding: 5px;" id="lastIp"><br>
                                        <span>最后上线时间：</span><input type="date" valueAsDate="2022-06-21 11:44:05"
                                            style="margin-top: 20px;" id="uptime" name="times"><br>
                                        <span>状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</span>
                                        <input type="radio" name="state" id="upok" style="margin-top: 20px;" value="1">
                                        <label for="upok">正常</label>
                                        <input type="radio" name="state" id="updisable" value="-1"> <label
                                            for="updisable">禁用</label>
                                        <input type="radio" name="state" id="upnoactive" value="3"> <label
                                            for="upnoactive">未激活</label>
                                        <input type="radio" name="state" id="updel" value="2"> <label
                                            for="updel">已删除</label><br>




                                        <span>权&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;限：</span>
                                        <input type="radio" name="power" id="superadmin" style="margin-top: 20px;"
                                            value="2">
                                        <label for="superadmin"><b class="red3">超级管理员</b></label>
                                        <input type="radio" name="power" id="defuadmin" value="1"> <label
                                            for="defuadmin">普通管理员</label>

                                    </div>

                                    <div
                                        style="font-size: 16px;margin-top: 26px;line-height: 30px;color: rgb(149, 67, 67); text-align: center;font-weight: 600;">
                                        <a href="javascript:void(0)" onclick="updateFromSubmit()"
                                            style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 19px;line-height: 60px;margin-left: 80px;margin-top: 60px;border-radius: 32px;width: 20%;">确定</a>
                                        <a style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 19px;line-height: 60px;margin-left: 340px;margin-top: -60px;border-radius: 32px;width: 20%;cursor: pointer;"
                                            onclick="nomsgDiv()">取消</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- 弹窗代码结束  -->


                        <!--添加 弹窗代码开始  -->
                        <div class="web_notice" id="adddiv"
                            style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);z-index: 99999;text-align: left;">
                            <div id="add"
                                style="position: fixed;top: 50%;left: 50%;width: 550px;background: #FFF;transform: translate(-50%, -50%);border-radius: 40px;padding: 50px 40px;">
                                <form action="admin/manager?opr=add" method="post" id="addSubmit">
                                    <h3 style="font-weight: bold;text-align: center;font-size: 30px;margin-top: -20px;">

                                        <span id="msgs">添加管理员</span>
                                        <span id="msgH"></span>

                                    </h3>
                                    <div style="font-size: 16px;">
                                        <input type="hidden" id="uid" name="uid" value="1">
                                        <span>用户名：</span> <input type="text" placeholder="请输入管理员账号"
                                            style="margin-top: 20px;padding: 5px;" id="addusername" name="account"><span
                                            id="msgname">*</span> <br>
                                        <span>密&nbsp;&nbsp;&nbsp;&nbsp;码：</span><input type="password" name="password"
                                            value="" style="margin-top: 20px;padding: 5px;" id="lastIp"><br>
                                        <span>状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</span>
                                        <input type="radio" name="state" id="upok2" style="margin-top: 20px;" value="1">
                                        <label for="upok2">正常</label>
                                        <input type="radio" name="state" id="updisable2" value="-1"> <label
                                            for="updisable2">禁用</label>
                                        <input type="radio" name="state" id="upnoactive2" value="3"> <label
                                            for="upnoactive2">未激活</label>
                                        <input type="radio" name="state" id="updel2" value="2"> <label
                                            for="updel2">已删除</label><br>

                                        <span>权&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;限：</span>
                                        <input type="radio" name="power" id="superadmin2" style="margin-top: 20px;"
                                            value="2">
                                        <label for="superadmin2"><b class="red3">超级管理员</b></label>
                                        <input type="radio" name="power" id="defuadmin2" value="1"> <label
                                            for="defuadmin2">普通管理员</label>

                                    </div>

                                    <div
                                        style="font-size: 16px;margin-top: 26px;line-height: 30px;color: rgb(149, 67, 67); text-align: center;font-weight: 600;">
                                        <a href="javascript:void(0)" onclick="addFromSubmit()"
                                            style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 19px;line-height: 60px;margin-left: 80px;margin-top: 60px;border-radius: 32px;width: 20%;">确定</a>
                                        <a style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 19px;line-height: 60px;margin-left: 340px;margin-top: -60px;border-radius: 32px;width: 20%;cursor: pointer;"
                                            onclick="nomsgDivAdd()">取消</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- 弹窗代码结束  -->

                    </div>
                    <div id="separator"></div>
                </div>
        </body>
        <script>
            window.addEventListener("load", function () {
                document.getElementById("admin_right").addEventListener("click", function (e) {
                    if (e.target.id === "delID") {
                        if (confirm("确定删除吗？")) {
                            location.href = "admin/manager?opr=del&id=" + e.target.getAttribute("data-uid");
                        }
                    }
                    if (e.target.id === "hfID") {

                        location.href = "admin/manager?opr=shield&state=1&id=" + e.target.getAttribute("data-uid");

                    }
                    if (e.target.id === "shieldID") {
                        if (confirm("确定禁用该用户吗？")) {
                            location.href = "admin/manager?opr=shield&state=-1&id=" + e.target.getAttribute("data-uid");
                        }
                    }
                    if (e.target.id === "repShieldID") {

                        location.href = "admin/manager?opr=shield&&state=1&id=" + e.target.getAttribute("data-uid");

                    }
                })
                if (${ seachUser.state == null }) {
                document.getElementById("state").value = "0";
            } else {
                document.getElementById("state").value = "${seachUser.state}";
            }
            if (${ seachUser.power == null }) {
                document.getElementById("power").value = "0";
            } else {
                document.getElementById("power").value = "${seachUser.power}";
            }
            // 页码下拉框初始化
            document.getElementById("pselect").value = "${pageBean.currPage}";
            // 页面数据量大小
            document.getElementById("usersize").value = "${pageBean.pageSize}";
    });

            function goPage(p) {
                document.getElementById("p").value = p;
                document.getElementById("searchFrom").submit();
            }

            function goPageSize(psize) {
                document.getElementById("pSize").value = psize;
                document.getElementById("searchFrom").submit();
            }
        </script>


        <style>
            #msg,
            #msgdiv,
            #adddiv,
            #add {
                display: none;
            }

            /* 弹窗动画 */
            #msg,
            #add {
                -webkit-animation: fadeleftIn .4s;
                animation: fadeleftIn .4s;
                -webkit-animation-name: popIn;
                animation-name: popIn;
            }

            @-webkit-keyframes popIn {
                0% {
                    -webkit-transform: scale3d(0, 0, 0);
                    transform: scale3d(0.5, 0.5, 0.5);
                    opacity: 0;
                }

                50% {
                    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
                    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
                }

                100% {
                    -webkit-transform: scale3d(1, 1, 1);
                    transform: scale3d(1, 1, 1);
                    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
                    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
                    opacity: 1;
                }
            }

            @keyframes popIn {
                0% {
                    -webkit-transform: scale3d(0, 0, 0);
                    transform: scale3d(0.5, 0.5, 0.5);
                    opacity: 0;
                }

                50% {
                    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
                    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
                }

                100% {
                    /* -webkit-transform: scale3d(1, 1, 1); */
                    /* transform: scale3d(1, 1, 1); */
                    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
                    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
                    opacity: 1;
                }
            }
        </style>
        <script>
            function show() {
                document.getElementById("msg").style.display = "block";
                document.getElementById("msgdiv").style.display = "block";
            }

            function nomsgDiv() {
                document.getElementById("msg").style.display = "none";
                document.getElementById("msgdiv").style.display = "none";
            }
        </script>
        <!-- 异步请求修改操作 -->
        <script>
            window.addEventListener("load", function () {
                document.getElementById("admin_right").addEventListener("click", function (e) {
                    if (e.target.id == "updateUser" || e.target.id == "updateUserName") {
                        // ajax异步请求刷新
                        var xmlhttp = new XMLHttpRequest();
                        xmlhttp.onreadystatechange = function (result) {
                            if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                                var user = JSON.parse(xmlhttp.responseText)
                                document.getElementById("upusername").value = user.username;
                                document.getElementById("uptime").valueAsDate = new Date(user.lastTime);
                                if (user.state === 1) {
                                    document.getElementById("upok").checked = true;
                                } else if (user.state === -1) {
                                    document.getElementById("updisable").checked = true;
                                } else if (user.state === 2) {
                                    document.getElementById("updel").checked = true;
                                } else if (user.state === 3) {
                                    document.getElementById("upnoactive").checked = true;
                                }

                                if (user.power === '2') {
                                    document.getElementById("superadmin").checked = true;
                                } else if (user.power === '1') {
                                    document.getElementById("defuadmin").checked = true;
                                }
                                if (user.lastIP == null) {
                                    document.getElementById("lastIp").value = '';

                                } else {
                                    document.getElementById("lastIp").value = user.lastIP;

                                }
                                document.getElementById("uid").value = user.id;
                            }
                        }
                        // true开启异步刷新
                        xmlhttp.open("GET", "admin/manager?opr=updateSelect&id=" + e.target.getAttribute("data-uid"), true);
                        xmlhttp.send();
                        // 显示弹窗
                        show();
                    }
                })

            })
        </script>
        <script>
            function updateFromSubmit() {

                $.ajax({
                    type: "post",
                    url: "admin/manager?opr=update",
                    data: $('#updateSubmit').serialize(),
                    dataType: "json",
                    async: false,
                    success: function (msg) {
                        console.log(msg)
                        if (msg.msg == 'ok') {
                            window.location.reload();
                            layer.msg('修改成功', { icon: 1 });
                        } else {
                            layer.msg(msg.msg, { icon: 2 });
                        }
                    },
                    error: function () {
                        layer.msg('系统繁忙，请稍后再试', { icon: 2 });
                    }
                })


                // // ajax异步请求刷新
                // var xmlhttps = new XMLHttpRequest();
                // xmlhttps.onreadystatechange = function (result) {
                //     if (xmlhttps.readyState === 4 && xmlhttps.status === 200) {
                //         var msgs = JSON.parse(xmlhttp.responseText)
                //         console.log(msgs.msg)
                //         alert(msgs.msg)
                //         document.getElementById("msgH").innerHTML = msgs.msg;
                //     }
                // }
                // // true开启异步刷新
                // xmlhttps.open("GET", document.getElementById("updateSubmit").submit(), true);
                // xmlhttps.send();
            }
        </script>
        <script>
            function showAdd() {
                document.getElementById("add").style.display = "block";
                document.getElementById("adddiv").style.display = "block";
                $("#msgname").text("*");
            }
            function nomsgDivAdd() {
                document.getElementById("add").style.display = "none";
                document.getElementById("adddiv").style.display = "none";
                $("#msgname").text("*");
            }
            function addFromSubmit() {
                $.ajax({
                    type: "post",
                    url: "admin/manager?opr=add",
                    data: $('#addSubmit').serialize(),
                    dataType: "json",
                    async: false,
                    success: function (msg) {
                        console.log(msg)
                        if (msg.msg == 'ok') {
                            location.href = "/admin/manager?opr=initManager&p=1";
                            layer.msg('添加成功', { icon: 1 });
                        } else {
                            layer.msg(msg.msg, { icon: 2 });
                        }
                    },
                    error: function () {
                        layer.msg('系统繁忙，请稍后再试', { icon: 2 });
                    }

                })


                // document.getElementById("addSubmit").submit();
            }
        </script>
        <script>
            $(function () {
                $("#addusername").blur(function () {
                    if ($("#addusername").val() == '') {
                        $("#msgname").prop("style").color = "red";
                        // $(this).prop("style").backgroundColor = "rgb(244, 169, 155)";
                        $("#msgname").text("账号不能为空");
                    } else if ($("#addusername").val() != '') {

                        $.ajax({
                            type: "post",
                            url: "/admin/manager",
                            data: "opr=check&account=" + $("#addusername").val(),
                            dataType: "json",
                            success: function (msg, states, xhr) {
                                if (msg.msg == 'ok') {
                                    $("#msgname").prop("style").color = "rgb(18, 157, 81)";
                                    // $(this).prop("style").backgroundColor = "aquamarine";
                                    $("#msgname").text("验证通过");
                                } else {
                                    $("#msgname").prop("style").color = "red";
                                    // $(this).prop("style").backgroundColor = "rgb(244, 169, 155)";
                                    $("#msgname").text(msg.msg);
                                }
                            },
                            error: function () {
                                layer.msg('系统繁忙，请稍后再试', { icon: 2 });
                            }
                        })
                    }
                })
            })
        </script>

        </html>